<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{ msg }}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    <!--
        此处存在报错,实际上并不是错误
        IDEA对于Vue的某些语法是不识别的
        Vue开发有自己的开发工具,常见的为:VSCode
        因此,此处编译报错仅仅是因为IDEA不识别该语法
        并不影响运行
    -->
    <button v-on:click="f1()">测试1</button><br/>
    <!--
        v-on:事件可以简写成@事件
        当对应的方法没有参数时,括号可以省略
    -->
    <button @click="f2">测试2</button><br/>
    <button @click="f3('Hello Vue')">测试3</button><br/>
    <!--
        当用户输入数据时触发事件,返回用户输入的值
        @event.target表示当前的事件源
    -->
    <input type="text" @input="f3($event.target.value)"/><br>
    <button @click="f4">测试4</button><br/>
    <!--
        可以在事件中直接通过key=value的方式
        为数据仓库中某一个数据重新赋值
    -->
    <button @click="msg = 'HelloWorld'">测试5</button>
    <!--
        v-show:元素的显示与隐藏
        其值为true时,显示元素
        其值为false时,隐藏元素
     -->
    <p v-show="flag">第一个段落</p>
    <p v-show="!flag">第二个段落</p>
</div>
</body>
<script>
    new Vue({
        el: "#d1",
        data:{
            msg: "<h1>Hello Vue</h1>",
            flag: true
        },
        methods:{
            f1:function(){
                console.log("正在执行f1方法");
            },
            // E6语法,简写用法
            f2(){
                console.log("正在执行f2方法");
            },
            f3(value){
                console.log(value);
            },
            f4(){
                // 如果想要在方法中获取数据仓库的数据
                // 不能直接写key
                // 此处可以通过this访问整个Vue
                // 然后以this.key的方式访问数据仓库的数据
                this.msg = "Hello World";
            }
        }
    })
</script>
</html>